<template>
  <div class="header">
    <headers></headers>

    <div class="swiper">
      <div class="block">
        <el-carousel height="757px">
          <el-carousel-item v-for="(item, index) in swiper" :key="index">
            <img :src="item.pic" />
          </el-carousel-item>
          <!-- <el-carousel-item>
            <img src="../static/img/6a537e611196aeba85534188b1e88cb51634777650862.jpg" alt />
          </el-carousel-item>-->
        </el-carousel>
      </div>
    </div>

    <div class="banner">
      <div class="banner1" v-for="(item, index) in data" :key="index">
        <div class="banner2">
          <p class="p2">{{ item.name }}</p>
          <p>{{ item.intro }}</p>
        </div>
        <div class="banner3">
          <img :src="item.pic" alt />
        </div>
      </div>
    </div>

    <div class="box">
      <div class="box1" v-for="(item, index) in par" :key="index">
        <img :src="item.pic" alt />
        <p>{{ item.name }}</p>
        <button @click="go(item.id)">查看详情</button>
      </div>
    </div>

    <!-- 底部 -->
    <Footer1></Footer1>
  </div>
</template>

<script>
import footers from "../components/footer.vue";
import headers from "../components/header";
import { swiper, list, products } from "../api/swiper";
import Footer1 from "../components/footer.vue";
export default {
  data() {
    return {
      swiper: [],
      data: [],
      par: [],
    };
  },
  mounted() {
    //请求轮播
    swiper().then((res) => {
      this.swiper = res.data.data;
      this.swiper.forEach((item) => {
        item.pic = item.pic.replace("public/", "http://websong.wang:3000/");
      });
      // console.log(this.swiper);
    });
    // 图片加文字

    list().then((res) => {
      // console.log(res);
      this.data = res.data.data;
      this.data.forEach((item) => {
        item.pic = item.pic.replace("public/", "http://websong.wang:3000/");
      });
      console.log(this.data);
    });
    //产品
    products().then((res) => {
      console.log(res);
      this.par = res.data.data;
      this.par.forEach((item) => {
        item.pic = item.pic.replace("public/", "http://websong.wang:3000/");
      });
    });
  },
  components: {
    headers,
    Footer1,
  },
  methods: {
    //跳转详情传递id
    go(e) {
      console.log(e);
      this.$router.push({
        path: "/detail",
        query: {
          id: e,
          // url的参数, 类似get请求的传参
        },
      });
    },
  },
};
</script>
<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
.header {
  width: 100%;
  background-color: #f3f7fa;
  .aa {
    background-color: #17a2b6;
  }
  // height: 60px;
  .header1 {
    background-color: #17a2b6;

    // padding-bottom: 30px;
    display: flex;
    width: 90%;
    margin: auto;
    ul {
      background-color: #17a2b6;

      width: 70%;
      // float: left;
      // flex: 1;
      list-style: none;
      // display: flex;
      height: 60px;
      li {
        background-color: #17a2b6;

        color: #fff;
        line-height: 60px;
        float: left;
        margin-left: 60px;
      }
    }
    div {
      background-color: #17a2b6;

      width: 30%;
      input {
        // float: right;
        border-radius: 5px;
        // margin-left: 300px;a
        height: 25px;
        margin-top: 15px;
      }
      button {
        // float: right;

        border-radius: 3px;
        width: 50px;
        height: 29px;
        color: white;
        border: none;
        background-color: #6c757f;
        margin-top: 15px;
      }
    }
  }

  .swiper {
    // margin-top: 50px;
    width: 80%;
    margin: 30px auto;
    // height: 300px;
    img {
      width: 100%;
      // margin: auto;
      // height: 450px;
    }
  }
  .banner {
    padding-bottom: 40px;
    padding-left: 20px;
    margin-top: 30px;
    width: 80%;
    margin: auto;
    border-radius: 50px;
    background-color: white;
    .banner1 {
      margin-top: 40px;
      height: 294px;

      width: 100%;
      display: flex;

      .banner2 {
        padding-left: 20px;
        padding-top: 100px;
        // height: 0px;
        // background-color: #17a2b6;
        width: 60%;
        .p2 {
          font-size: 20px;
          padding: 5px;
        }
      }
      .banner3 {
        margin-left: 60px;
        margin-top: 30px;
        // margin: 40px;
        // background-color: #6c757f;
        height: 294px;
        // width: 30%;
        width: 294px;
        border-radius: 50%;
        overflow: hidden;
        img {
          // margin: 10px;
          width: 100%;
        }
      }
    }

    .banner1:nth-child(2) {
      flex-direction: row-reverse;
      .banner3 {
        margin-right: 60px;
      }
    }
  }
  .box {
    // height: 800px;
    // overflow: hidden;
    border-radius: 30px;
    // margin-top: 30px;
    background-color: white;
    width: 80%;
    margin: 30px auto;
    display: flex;
    padding: 10px;
    flex-wrap: wrap;
    .box1 {
      // height: 80px;
      margin: 40px;
      // background-color: #17a2b6;
      width: 40%;
      img {
        width: 100%;
      }
      p {
        padding: 10px;
      }
      button {
        // padding-left: 10px;
        margin-left: 10px;
        padding: 5px;
        color: white;
        font-size: 10px;
        background-color: #17a2b6;
        border-radius: 5px;
        border: none;
      }
    }
  }
}
</style>
